/*
 * @Author: Written by ChangDeLu && changyuhang991007@163.com
 * @Date: 2024-03-28 15:36:14
 * @LastEditors: Written by ChangDeLu && changyuhang991007@163.com
 * @LastEditTime: 2024-04-19 14:34:28
 * @FilePath: /magic/src/Component/Loading.ts
 */


import React from 'react';
import ReactDOM from 'react-dom/client';
import { Mask, DotLoading } from 'antd-mobile';
import styled from 'styled-components';
import type ILoading from '../types/loading';

const SDiv = styled.div`
    display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    font-size: 16px;
`;

const showLoading = (props?: ILoading) => {
    if (document.getElementById('Rfc_LoadingView_cyh')) {
        return;
    };
    const div = document.createElement('div');
    div.id = 'Rfc_LoadingView_cyh';
    let far = document.body.appendChild(div);
    ReactDOM.createRoot(
        far as HTMLElement
    ).render(React.createElement(Mask, { disableBodyScroll: false },
        React.createElement(SDiv, { style: { color: props?.color } },
            React.createElement(DotLoading, { color: "currentColor" }, null),
            React.createElement('span', [], props?.text)
        )));
    document.body.style.overflow = 'hidden';
}

const hiddenLoading = () => {
    document.getElementById('Rfc_LoadingView_cyh')?.remove();
    document.body.style.overflow = '';
}

export { showLoading, hiddenLoading };